<route>
{
  "meta":{
    "title":"执行记录",
    "showMenu":true,
    "serialNum": 20,
    "localism": "sys.execution_record"
  }
}
</route>

<template>
  <div>
    <el-row :gutter="12">
      <el-col :span="6">
        <el-input
          v-model="queryData.jobName"
          :placeholder="$t('sys.task_name')"
          clearable
          :maxlength="64"
          prefix-icon="el-icon-search"
        />
      </el-col>
      <!-- status 1 没有异常  0有异常 -->
      <el-col :span="6">
        <el-select
          v-model="queryData.status"
          :placeholder="$t('sys.is_abnormal')"
          style="width: 100%"
          clearable
        >
          <el-option value="0" :label="$t('sys.yes')"></el-option>
          <el-option value="1" :label="$t('sys.no')"></el-option>
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="loadData(1)">{{
          $t("sys.query")
        }}</el-button>
        <el-button @click="handleReset">{{ $t("sys.reset") }}</el-button>
      </el-col>
    </el-row>
    <el-table
      class="mt20"
      :data="tableData"
      v-loading="loading"
      style="width: 100%"
      current-row-key="id"
      stripe
      border
    >
      <el-table-column prop="jobName" :label="$t('sys.task_name')" />
      <el-table-column prop="startTime" :label="$t('sys.start_time')">
        <template slot-scope="scope">
          {{ scope.row.startTime | moment }}
        </template>
      </el-table-column>
      <el-table-column prop="endTime" :label="$t('sys.end_time')">
        <template slot-scope="scope">
          {{ scope.row.stopTime | moment }}
        </template>
      </el-table-column>
      <el-table-column prop="modifyDate" :label="$t('sys.is_abnormal')">
        <template slot-scope="scope">
          <span class="mr8">{{ scope.row.status == "1" ? $t("sys.no") : $t("sys.yes") }}</span>
          <el-button
            v-if="scope.row.status !== '1'"
            type="text"
            @click="viewExceptionInfo(scope.row)"
          >{{$t('sys.error_logs')}}</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="jobMessage" :label="$t('sys.results_enforcement')">
        <template slot-scope="scope">
          {{scope.row.jobMessage}}
        </template>
      </el-table-column>
    </el-table>
    <div class="tr mt24">
      <x-pagination
        :total="total"
        :pageSize.sync="pageData.pageSize"
        :pageNo.sync="pageData.pageNo"
        @search="loadData"
      />
    </div>
    <exception-info ref="ExceptionInfo"></exception-info>
  </div>
</template>

<script>
import { getHmsysjoblogPageList } from "@/apis/paas/HmSysJobLogController.js";
import ExceptionInfo from "./__components__/ExceptionInfo";
export default {
  name: "JobLogs",
  components: {ExceptionInfo},
  data() {
    return {
      loading: false,
      queryData: {},
      pageData: {
        pageSize: 10,
        pageNo: 1,
      },
      tableData: [],
      total: 0,
    };
  },

  created() {
    this.loadData();
  },
  methods: {
    loadData(pageNo = this.pageData.pageNo) {
      getHmsysjoblogPageList({
        ...this.queryData,
        ...this.pageData,
        pageNo,
      }).then((res) => {
        if (res.records.length === 0 && pageNo > 1) {
          this.loadData(pageNo - 1);
          return;
        }
        this.tableData = res.records;
        this.total = res.total;
      });
    },
    viewExceptionInfo(record){
     this.$refs.ExceptionInfo.showModal(record)
    },
    handleReset() {
      this.queryData = {};
      this.loadData(1);
    },
  },
};
</script>

<style lang="scss" scoped>
.content{
  word-wrap: break-word;
  line-height: 20px;
}
</style>
